<template>
	<theme-box title="关注者列表" theme="primary">
	<div class="row">
	  <style>
			.list-group-item span.pull-right {
				color:#3c8dbc;
			}
	  </style>
		<div class="col-sm-3">
		  <theme-box title="用户组">
		  <div slot="tools">
					<button type="button" class="btn btn-box-tool" @click="createGroupModal"><i class="fa fa-plus"></i> 新增组别
					</button>
		  </div>
			<ul class="list-group list-group-unbordered">
					<a class="list-group-item text-center selected" href="javascript:void(0)" @click="deselect" v-el:all>
						<b>全部组别</b> <!-- <span class="pull-right">199</span> -->
					</a>
					<a class="list-group-item subitem" href="javascript:void(0)" v-for="item in subGroup" @click="selected" data-id="{{item.id.id}}">
						<b>{{item.name}}</b>
						<span class="pull-right" @click="remove(item,$event)">
							<i class="fa fa-trash"></i>
						</span>
						<span class="pull-right" @click="edit(item)" style="margin-right:10px">
							<i class="fa fa-edit"></i>
						</span>
					</a>
				</ul>
		  </theme-box>

		</div>
		<div class="col-sm-9">
			<form class="form-inline" @submit.prevent v-el:searchform>
			  <div class="form-group">
			    <label class="label-control">全选：</label>
			  	<input type="checkbox" @click="selectAll" v-el:allselect>
			  </div>
				<button type="button" @click="configModal" class="btn btn-box-tool" style="color:#3c8dbc">
					<i class="fa fa-edit"></i>
					配置组别
				</button>
				<v-button theme="warning" class="pull-right" @click="reset">同步</v-button>
				<v-button theme="primary" class="pull-right" @click="search">查询</v-button>
				<div class="form-group pull-right" style="margin-right:20px">
					<label>微信号：</label>
					<input type="text" class="form-control" v-el:searchname>
				</div>
			</form>
			<table class="table fixed table-bordered table-striped" v-el:table>
			</table>
		</div>
	</div>
  <style>
	.dataTables_wrapper .col-sm-5 {
		float: none;
	}
	.dataTables_wrapper .col-sm-7 {
		float: none;
		width: 100%;
	}
	.dataTables_wrapper .col-sm-7 div.dataTables_paginate {
		margin-top:10px;
		text-align: left;
	}
	.list-group-item.subitem {
		padding-left:5px;
		padding-right:10px;
	}
	input[type="checkbox"].ilist {
		margin-right:8px;
	}
	</style>
	</theme-box>

	<modal-container title="新增组别" v-el:imodel>
		<form>
			<div class="modal-body">
				 <form-group title="组别名称" left="3">
						<input type="text" class="form-control" v-el:input>
				 </form-group>
			</div>
			<div class="modal-footer">
				<v-button theme="primary" class="pull-left" @click="createGroup">增加</v-button>
				<v-button data-dismiss="modal">取消</v-button>
			</div>
	 </form>
	</modal-container>

		<modal-container title="新增组别" v-el:imodel>
		<form>
			<div class="modal-body">
				 <form-group title="组别名称" left="3">
						<input type="text" class="form-control" v-el:input>
				 </form-group>
			</div>
			<div class="modal-footer">
				<v-button theme="primary" class="pull-left" @click="createGroup">增加</v-button>
				<v-button data-dismiss="modal">取消</v-button>
			</div>
	 </form>
	</modal-container>

  <!--  class="wide-modal" -->
	<modal-container class="middle-modal" title="分配选定用户的用户组" v-el:config>
	  <style>
			.modal-body .col-sm-3 {
				padding-top:10px;
				padding-bottom:10px;
			}
	  </style>
		<div class="modal-body">
			<ul class="row">
				<li class="col-sm-3" v-for="(index,item) in subGroup">
<!--
					<input name="group" type="radio" :value="item.id.id" :checked="index==0">
					<label class="control-label">{{item.name}}</label>
-->
					<div class="radio">
						 <label>
								<input name="group" type="radio" :value="item.id.id" :checked="index==0">{{item.name}}
						 </label>
					</div>
				</li>
			</ul>
		</div>
		<div class="modal-footer">
			<v-button theme="primary" class="pull-left" @click="configGroup">确认</v-button>
			<v-button data-dismiss="modal">取消</v-button>
		</div>
	</modal-container>
	<app-loader v-ref:loader></app-loader>
	<modal-modify v-ref:modify :item="item"></modal-modify>
</template>

<style scoped>
	.form-inline .btn+.btn {
		margin-right: 10px;
	}
	.form-inline .form-group+.form-group {
		margin-left: 20px;
	}
</style>
<style>
	a.list-group-item.selected {
		background-color: #f5f5f5;
	}
</style>
<script>
	import {
		deepClone
	}
	from 'lib/clone.js';

	import Modify from './list.modify.vue';

	let datatable;
	export default {
		data: () => ({
			dataSet: {
				data: [],
				recordsTotal: 0,
				recordsFiltered: 0
			},
			columnsSet: [],
			subGroup: [],
			selectUser: [],
			item:{}
		}),
		components: {
		  'modal-modify':Modify
		},
		methods: {
				reset() {
//					this.$els.searchform.reset();
//					datatable.api().ajax.reload();
					let message = {
						title:"操作提示",
						content:"是否确认要进行同步"
					}
					let self = this;
					Midway.confirm(message).then(function(){
						self.$refs.loader.init();
						self.$search({
							url: '/api/v1' + projectName_Url + '/wechat/usr/syn.html'
						}).then(response => {
							self.$refs.loader.hide();
							let message = {
								title: "操作提示",
								content: "同步成功"
							}
							Midway.alert(message);
							self.$els.searchform.reset();
							datatable.api().ajax.reload();
						},error => {
							self.$refs.loader.hide();
						});
					})
				},
				search() {
					datatable.api().ajax.reload();
					$(this.$els.allselect).prop("checked",false)
				},
				selected(e) {
					let target = $(e.target);
					if(!target.hasClass("selected")) {
						target.addClass("selected").siblings().removeClass("selected");
						//datatable.api().ajax.reload();
						this.search();
					}
				},
				deselect() {
					$(this.$els.all).addClass("selected");
					$(".list-group-item.subitem").removeClass("selected");
					//datatable.api().ajax.reload();
					this.search();
				},
				selectAll(e) {
					let result = $(e.target).prop("checked");
					$("input.ilist").prop("checked",result);
				},
				edit(_item) {
					this.$set("item",_item)
				  this.$refs.modify.init();
				},
				remove(_item,e) {
					let item = _item;
					let message = {
						title: "操作提示",
						content: "是否删除组别"+item.name+"?"
					}
					let self = this;
					let target = $(e.target).closest('.subitem');

					Midway.confirm(message).then(function(){
						let data = {};
						data.id = item.id.id;
						data.mchtIdFlag = item.id.mchtId;
						self.$post({
							data,
							url: '/api/v1' + projectName_Url + '/wechat/subGroup/del.html'
						}).then(response => {
							if(response.respCode!=='00') {
								alert('error');
							} else {
								let message = {
									title: "操作提示",
									content: "删除操作成功"
								}
								Midway.alert(message);
								self.subGroup.$remove(item);
								if(target.hasClass("selected")) {
									self.deselect();
								}
								datatable.api().ajax.reload();
							}
						},error => {});
					})

				},
				createGroupModal() {
					$(this.$els.imodel).find("form")[0].reset();
					$(this.$els.imodel).modal('show');
				},
				createGroup() {
					let self = this;
					let name = this.$els.input.value;
					if(name.length>10) {
						let alert = {
							title:"温馨提示",
							content:"组别名请控制在十个字以内"
						}
						Midway.alert(alert);
						return false;
					}
					if(!name) {
						let alert = {
							title:"操作提示",
							content:"请填写组别名称"
						}
						Midway.alert(alert);
						return false;
					}
					let data = {};
					data.name = name;
					data.mchtIdFlag = localStorage.getItem('get_id');
					self.$post({
						url: '/api/v1' + projectName_Url + '/wechat/subGroup/add.html',
						data
					}).then(response => {

						let message = {
							title: "操作提示",
							content: "增加操作成功"
						}
						Midway.alert(message);
						$(this.$els.imodel).modal('hide');
						self.subGroup.push(response.content);

					}, error => {});

					$(this.$els.imodel).modal('hide');
				},
				setConfig() {
					//..加载配置
					let self = this;
					this.columnsSet = [
					{
							title: "关注者ID",
							className: "first-td",
							data: "id.subcribeId",
						  render: function(data,display,row) {
								data= "<input class='ilist' name='ilist' value='"+row.openid+"' type='checkbox'/>"+data;
								return data;
							}
					},
					{
							title: "公众号ID",
							data: "openid"
					},
					{
							title: "微信号",
							data: "nickname"
					},
					{
							title: "性别",
							data: "sex",
							className: "text-center",
						  width: "40px",
						  render: function(data) {
								if(data == 1) {
									return '男'
								} else if(data == 2) {
									return '女'
								} else {
									return '未知'
								}
							}
					},
					{
							title: "城市",
							data: "city",
							className: "text-center",
						  width: "40px"
					},
					{
							title: "语言",
							data: "language",
							className: "text-center",
						  width: "48px"
					},
					{
							title: "关注时间",
							data: "subscribeTime"
					},
					{
							title: "组别",
							data: "groupName"
					},
					{
							title: "备注",
							data: "remarks"
					}
			];
				},
				configModal() {
					let self = this;
					let itemElements = $("input[name=ilist]:checked");
					let items = Array.from(itemElements);
					let list_map = items.map(item=>{
						return $(item).val()
					});
					this.$set("selectUser",list_map);
					if(itemElements.length>0) {
						$(this.$els.config).modal('show');
					} else {
						Midway.alert('请先选择关注用户')
					}

				},
				configGroup() {
					let data = {};
					data.openList = (this.selectUser).join(",");
					data.groupId =  $("input[name=group]:checked").val();

					let self = this;
					this.$post({
						url: '/api/v1' + projectName_Url + '/wechat/usr/batchMv.html',
						data
					}).then(response => {
//						let data = response.content.groupList;
//						this.$set("subGroup",data);
						$(this.$els.config).modal('hide');
						let  message = {
							title:"操作提示",
							content:"配置成功"
						}
						Midway.alert(message);
						//datatable.api().ajax.reload();
						this.search();
					}, error => {});

				},
				getSubGroup() {
					let self = this;
					self.$search({
						url: '/api/v1' + projectName_Url + '/wechat/subGroup/query.html'
					}).then(response => {
						let data = response.content.groupList;
						this.$set("subGroup",data);
					}, error => {});
				},
				loadData(data = {}) {
					//..加载数据
					let self = this;

					return new Promise(function (resolve, reject) {
						self.$search({
							url: '/api/v1' + projectName_Url + '/wechat/usr/query.html',
							data
						}).then(function (response) {
								let data = response;
								self.dataSet.data = data.content.usrList;
								self.dataSet.recordsTotal = data.content.total;
								self.dataSet.recordsFiltered = data.content.total;
								return resolve();
						}, function (response) {
							//console.error(response);
							return reject();
						});

					})
				},
				getCollection () {
					//http
					let collection = {};
					collection.state = [
						{
							key:1,
							content:"正常"
						},
					  {
						  key:0,
						  content:"锁定"
						}
					]
					return collection;
				}
		},
		created() {
			this.setConfig();
		},
		ready() {
			this.getSubGroup();
			let self = this;
			datatable = $(this.$els.table).dataTable({
				"columns": self.columnsSet,
				"paging": true,
				"pagingType": "full_numbers",
				"lengthChange": false,
				"searching": false,
				"ordering": false,
				"info": true,
				"autoWidth": false,
				"serverSide": true,
				"processing": true,
				"ajax": function (data, callback, settings) {

					let result = {};
					let _data = {};

					_data.aoData = JSON.stringify([{
						"name": "iDisplayStart",
						"value": 1 + data.start / data.length
									}, {
						"name": "iDisplayLength",
						"value": data.length
									}]);

					_data.nickname = self.$els.searchname.value;

					let itemElement = $("a.list-group-item.subitem.selected");
					if(itemElement.length == 1 ) {
						_data.groupId = $(itemElement).data("id");
					}
					self.loadData(_data).then(function () {
						result = self.dataSet;
						callback(result);
					}, function () {
						result.data = [];
						callback(result);
					})

				},
				"fnDrawCallback": function( settings ) {
					let count = Math.ceil(settings._iRecordsTotal/settings._iDisplayLength);
					if(count<=1) {
						  $('.dataTables_paginate').hide();
					} else {
						  $('.dataTables_paginate').show();
					}

				}

			});
		}
	}
</script>
